<!-- 登陆 -->
<template>
  <div class="login">
    <div class="logos">
      <img width="8.5625rem"
        src="../img/login_footer.png"
        alt="">
    </div>
    <div class="tabs">
      <button :class="{current:isAttr}"
        @click="actives(true)">验证码登陆</button>
      <button :class="{current:!isAttr}"
        @click="actives(false)">密码登陆</button>
    </div>
    <form>
      <div v-if="isAttr">
        <form-input :options='phone'
          @phoneVal='phoneForm.phoneNumber = $event'></form-input>
        <form-input :options="{type:'验证码',reg:/^[0-9]{4}$/}"
          @phoneVal='phoneForm.verify = $event'></form-input>
      </div>
      <div v-if="!isAttr">
        <form-input :options='{type:"用户名"}'></form-input>
        <form-input :options='{type:"密码"}'></form-input>
        <form-input :options='{type:"验证码"}'>
          <img src="http://localhost:3000/api/usPw"
            @click="changeCode"
            ref="code"
            alt="">
        </form-input>
      </div>
    </form>
    <div class="btn">
      <button class="btn"
        @click="logoin">登 陆</button>
      <button>返 回</button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import formInput from '../../../components/Me/FormInput'
import axios from '../../../api/axios'
export default {
  data () {
    return {
      phone: {
        type: '手机号',
        isShow: true,
        reg: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
      },
      isAttr: true,
      phoneForm: {
        phoneNumber: '',
        verify: ''
      },
      activeCaptcha: ''
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  methods: {
    // 手机号，用户名登陆的切换
    actives (val) {
      this.isAttr = val
      this.getCaptcha()
    },
    // 点击登陆处理事件。
    logoin () {
      // vuex全局配置
      // if (this.phoneForm.phoneNumber === this.verify.phoneNumber && this.phoneForm.verify === this.verify.verify) {
      //   console.log('登陆成功')
      //   this.phoneForm.phoneNumber = ''
      //   this.phoneForm.verify = ''
      // } else {
      //   console.log('验证码错误')
      // }

      // 手机号登陆
      if (this.isAttr) {
        if (this.phoneForm.phoneNumber !== '' && this.phoneForm.verify !== '') {

        }
      } else {
        // 用户名，密码登陆
        console.log('用户名登陆')
      }
    },
    // 获取验证码
    async getCaptcha () {
      if (this.isAttr === false) {
        this.activeCaptcha = await axios.get('usPw')
      }
    },
    changeCode () {
      this.$refs.code.src = 'http://localhost:3000/api/usPw?time' + new Date()
    }
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {
    console.log(this.verify)
  },
  components: {
    formInput
  },
  computed: {
    ...mapState(['verify'])
  }
}
</script>
<style lang='stylus' scoped>
/* @import url(); 引入css类 */
.login {
  width: 100%;
  height: 100%;

  .logos {
    width: 100%;
    height: 12.5rem;
    // background-color red
    display: flex;
    align-items: center;
    border-bottom: 0.125rem solid #e67e22;
    justify-content: center;

    img {
      width: 8.5625rem;
    }
  }

  .tabs {
    width: 100%;
    height: 3.75rem;
    display: flex;
    align-items: center;
    justify-content: center;

    .current {
      color: #eb3c70;
      border-bottom: 0.125rem solid #eb3c70;
    }

    button {
      background: none;
      font-size: 1rem;
      padding-bottom: 0.3125rem;
    }

    button:first-child {
      margin-right: 1.25rem;
    }
  }

  .btn {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    button {
      width: 80%;
      height: 3.125rem;
      display: block;
      line-height: 3.125rem;
      font-size: 1.125rem;
      color: #fff;
      border-radius: 0.3125rem;
      border: 0.0625rem solid #eb3c70;
      background-color: rgba(235, 60, 112, 0.5);
    }

    .btn {
      margin: 1.25rem 0rem;
      background-color: #eb3c70;
    }
  }
}
</style>
